<template>
  <div id="app">
    <div class="layer">
      <button @click="count(-1)" class="btn">-</button>
      <div class="box" v-text="num"></div>
      <button @click="count(1)" class="btn">+</button>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
        return {
            num:0
        }
    },
    methods:{
        count(val){
          var rs = this.num + val;
          this.num = rs < 0 ? 0 : rs; 
        }
    }
  }
</script>

<style>
  *{
      padding: 0;
      margin: 0;
  }
  .layer{
      width: 800px;
      height: 200px;
      background-color: #000;
      display: flex;
      color:red;
      font-size: 100px;
      text-align: center;
      line-height: 200px;
      margin:200px auto;
  }
  .box{
      width: 600px;
      height:200px;
  }
  .btn{
      width:100px;
      height:200px;
      background-color: #000;
      color:#fff;
      font-size: 100px;
      text-align: center;
      line-height: 200px;
      border:0;
      outline: none;
  }
</style>
